<template>
  <!-- 开店申请 -->
  <div class="mod-seckill-shopAuditing">
    <div class="search-bar">
      <el-form
        @submit.native.prevent
        :inline="true"
        ref="searchForm"
        :model="searchForm"
        size="small"
      >
        <div class="input-row margin-bottom-none">
          <el-form-item prop="shopName" :label="$t('outlet.outletName') + ':'">
            <el-input
              v-model="searchForm.shopName"
              size="small"
              :placeholder="$t('outlet.outletName')"
            ></el-input>
          </el-form-item>


          <!-- <el-form-item :label="$t('outlet.outletId') + ':'">
            <el-input
              v-model="searchForm.shopCode"
              size="small"
              :placeholder="$t('tip.input')"
            ></el-input>
          </el-form-item> -->

          <el-form-item :label="$t('coupon.brandName') + ':'">
            <el-input
              v-model="searchForm.brandName"
              size="small"
              :placeholder="$t('tip.input')"
            ></el-input>
          </el-form-item>

          <el-form-item :label="$t('outlet.brandTagId') + ':'">
            <el-select
              clearable
              filterable
              v-model="searchForm.brandTagName"
              :placeholder="$t('tip.select')"
            >
              <el-option
                v-for="item in allBrandList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('distributionMsg.auditStatus') + ':'">
            <el-select
              clearable
              v-model="searchForm._auditStatus"
              @change="changeAuditStatus"
              :placeholder="$t('distributionMsg.auditStatus')"
            >
              <el-option
                :label="$t('liveRoom.auditFailed')"
                :value="-1"
              ></el-option>
              <el-option
                :label="$t('shopProcess.storeOpeningApplicationPendingReview')"
                :value="0"
              ></el-option>
              <el-option
                :label="$t('brand.platformOffline')"
                :value="2"
              ></el-option>
              <el-option
                :label="$t('brand.platformOfflineToBeReviewed')"
                :value="3"
              ></el-option>
              <el-option
                :label="$t('shopProcess.shopApplication')"
                :value="4"
              ></el-option>
              <el-option
                :label="$t('shopProcess.storeOpeningApplicationPendingReview')"
                :value="5"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            :label="$t('brand.applicationTime') + ':'"
            label-width="70px"
          >
            <el-date-picker
              v-model="dateRange"
              @change="changeDateRange"
              type="datetimerange"
              :range-separator="$t('coupon.to')"
              value-format="yyyy-MM-dd HH:mm:ss"
              :start-placeholder="$t('coupon.startTime')"
              :end-placeholder="$t('coupon.endTime')"
            ></el-date-picker>
          </el-form-item>

          <el-form-item style="float: right">
            <div class="default-btn primary-btn" @click="searchChange(true)">
              {{ $t("product.search") }}
            </div>
            <div class="default-btn" @click="resetSearchForm('searchForm')">
              {{ $t("product.reset") }}
            </div>
          </el-form-item>

        </div>
      </el-form>
    </div>
    <div class="main-container">
      <div class="table-con audit-shop-table">
        <el-table
          :key="tabValue"
          ref="auditShop"
          :data="dataList"
          header-cell-class-name="table-header"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            :label="$t('formData.serialNumber')"
            type="index"
            width="50"
          >
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            :label="$t('outlet.shopLogo')"
            width="auto"
          >
            <template slot-scope="scope">
              <img
                :src="getImgSrc(scope.row.shopLogo)"
                :alt="scope.row.prodName"
                style="width: 60px; height: 60px"
                @error="handlePicError"
              />
            </template>
          </el-table-column>

          <el-table-column prop="shopName" :label="$t('outlet.outletName')">
            <template slot-scope="scope">
              <span class="table-cell-text">{{ scope.row.shopName }}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="brandTagName"
            :label="$t('outlet.brandTagId')"
            width="auto"
          >
            <!-- <template slot-scope="scope">
              <img
                :src="getImgSrc(scope.row.brandTagName)"
                :alt="scope.row.prodName"
                style="width: 60px; height: 60px"
                @error="handlePicError"
              />
            </template> -->
          </el-table-column>

          <!-- <el-table-column
            prop="shopLogo"
            :label="$t('brand.brandLogo')"
          >
            <template slot-scope="scope">
              <div class="table-cell-image">
                <img :src="getImgSrc(scope.row.shopLogo)" @error="handlePicError">
              </div>
            </template>
          </el-table-column> -->

          <!-- <el-table-column
            align="center"
            prop="type"
            :label="$t('o2oBrand.logo')"
            width="auto"
          >
            <template slot-scope="scope">
              <img
                :src="getImgSrc(scope.row.shopLogo)"
                :alt="scope.row.prodName"
                style="width: 60px; height: 60px"
                @error="handlePicError"
              />
            </template>
          </el-table-column> -->

          <!-- <el-table-column
            align="center"
            prop="shopAddress"
            :label="$t('o2oBrand.storeLocation')"
            width="auto"
          >
          </el-table-column> -->

          <el-table-column
            align="center"
            prop="brandName"
            :label="$t('o2oBrand.lessor')"
            width="auto"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="shopAddress"
            :label="$t('o2oBrand.storeLocation')"
            width="auto"
          >
          </el-table-column>

          <!-- <el-table-column
            align="center"
            prop="shopStatusList"
            :label="$t('outlet.businStatus')"
            width="auto"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.shopStatus === 0" class="tag-text">{{
                $t("outlet.close")
              }}</span>
              <span v-else-if="scope.row.shopStatus === 1" class="tag-text">{{
                $t("outlet.normal")
              }}</span>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="shopStatusList"
            :label="$t('shop.storeStatus')"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status === -1" class="tag-text">{{
                $t("shop.failed")
              }}</span>
              <span v-else-if="scope.row.status === 0" class="tag-text">{{
                $t("shop.unreviewed")
              }}</span>
              <span v-else-if="scope.row.status === 1" class="tag-text">{{
                $t("shop.passed")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="submitTime"
            :label="$t('brand.applicationTime')"
          >
          </el-table-column>
          <el-table-column :label="$t('publics.operating')" width="150px">
            <template slot-scope="scope">
              <div
                class="default-btn text-btn"
                v-if="isAuth('platform:station:outletAuditing')"
                @click="shopAuditHandle(scope.row.shopId)"
              >
                {{ $t("productComm.audit") }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        v-if="dataList.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        theData: null, // 保存上次点击查询的请求条件
        theParams: null, // 保存上次点击查询的请求条件
        dataList: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条
        },
        searchForm: {
          shopStatusList: undefined,
          intro: undefined,
          shopName: undefined,
          auditingStatusList: [-1, 0, 2, 3, 4, 5],
          _auditStatus: undefined,
        }, // 搜索
        dateRange: [],
        dataListSelections: [],
        dataListLoading: false,
        shopAuditVisible: false,
        allBrandList: [],
      };
    },
    props: {
      tabValue: {
        type: String,
        default: "",
      },
    },
    components: {},
    created() {
      this.getDataList();
      this.getAllBrandList();
    },
    mounted() {},
    methods: {
      changeDateRange(e) {
        if (e) {
          this.searchForm.startSubmitTime = e[0];
          this.searchForm.endSubmitTime = e[1];
        } else {
          delete this.searchForm.startSubmitTime;
          delete this.searchForm.endSubmitTime;
        }
      },
      changeAuditStatus() {
        console.log(this.searchForm._auditStatus);
        this.searchForm.auditingStatusList = [this.searchForm._auditStatus];
      },
      getAllBrandList() {
        this.$http({
          url: this.$http.adornUrl(`/platform/brandTag/choose-list`),
          method: "get",
        }).then((res) => {
          this.allBrandList = res.data;
        });
      },
      getDataList(page, newData = false) {
        page = page || this.page;
        if (newData || !this.theData) {
          this.theData = {
            current: page.currentPage,
            size: page.pageSize,
            status: 0,
          };
          this.theParams = JSON.parse(JSON.stringify(this.searchForm));
        } else {
          this.theData.current = page.currentPage;
          this.theData.size = page.pageSize;
        }
        this.dataListLoading = true;
        this.$http({
          url: this.$http.adornUrl("/shop/shopAuditing/page"),
          method: "get",
          params: this.$http.adornParams(
            Object.assign(this.theData, this.theParams, {
              sysType: 1,
            })
          ),
        }).then(({ data }) => {
          this.dataList = data.records;
          this.page.total = data.total;
          this.page.currentPage = data.current;
          this.dataListLoading = false;

          // let pageCont = document.getElementsByClassName('el-pager')[1].children
          // if (data.current !== 1) {
          //   pageCont[0].classList.remove('active')
          // }
        });
      },
      /**
       * 刷新回调
       */
      refreshChange() {
        this.getDataList(this.page);
      },
      // 清空自定义数据
      searchReset() {
        this.dateRange = [];
      },
      searchChange(newData = false) {
        this.page.currentPage = 1;
        this.getDataList(this.page, newData);
      },
      // 弹窗处理
      shopAuditHandle(id) {
        this.$router.push({
          path: "/platform-outlet/auditOutlet-detail",
          query: { shopId: id, pageType: "toAudit" },
        });
      },
      /**
       * 重置表单
       * @param {String} formName 表单名称
       */
      resetSearchForm(formName) {
        this.$refs[formName].resetFields();
        this.searchForm = {
          shopStatusList: undefined,
          intro: undefined,
          shopName: undefined,
          auditingStatusList: [-1, 0, 2, 3],
          _auditStatus: undefined,
        };
        this.dateRange = [];
      },

      handleSizeChange(val) {
        this.page.pageSize = val;
        this.getDataList();
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.getDataList();
      },

      /**
       * 获取图片路径
       */
      getImgSrc(img) {
        if (!img) {
          return "";
        }
        if (img.indexOf("http://") === 0 || img.indexOf("https://") === 0) {
          return img;
        }
        return this.resourcesUrl + img;
      },
      /**
       * 当图片加载失败时，切换至默认图
       */
      handlePicError(event) {
        event.target.src = require("@/assets/img/shop-logo-def.png");
      },
    },
  };
</script>
<style lang="scss" scoped></style>
